<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 150px;
            height: 150px;
            border: 1px solid pink;
        }

        .btn {
            position: absolute;
            top: 0;
            right: 27px;
        }

        img {
            width: 100px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="box">
        <button class="btn">x1</button>
        <img src="./imgs/睁眼.png" alt="">
    </div>
    <div class="box">
        <button class="btn">x2</button>
        <img src="./imgs/睁眼.png" alt="">
    </div>
    <div class="box">
        <button class="btn">x3</button>
        <img src="./imgs/睁眼.png" alt="">
    </div>
    <div class="box">
        <button class="btn">x4</button>
        <img src="./imgs/睁眼.png" alt="">
    </div>
    <div class="box">
        <button class="btn">x5</button>
        <img src="./imgs/睁眼.png" alt="">
    </div>

    <script>
        // 只有一个的时候
        // 第一种普通写法
        // var btn = document.querySelector('.btn')
        // var box = document.querySelector('.box')
        // var img = document.querySelector('img')
        // flag = 0
        // btn.onmousedown = function () {
        //     if (flag == 0) {
        //         box.style.display = 'none'
        //         flag = 1
        //     } else {
        //         box.style.display = 'block'
        //         flag = 0
        //     }
        // }
        // 第二种推荐写法
        // let btn = document.querySelector('.btn')
        // btn.addEventListener('click', function () {
        //     this.parentNode.style.display = 'none'
        // })
        // 有多个的时候
        let btns = document.querySelectorAll('.btn')
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                // console.log(this);
                // 隐藏不占位置
                // this.parentNode.style.display='none'
                // 隐藏占位置
                this.parentNode.style.visibility = 'hidden'
            })
        }
    </script>

</body>

</html>